<template>
    <div>
      <!-- 面包屑导航条 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$route.query.type!='check'">
        <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>借贷管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增借款</el-breadcrumb-item>
      </el-breadcrumb>
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$route.query.type=='check'">
        <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>借贷管理</el-breadcrumb-item>
        <el-breadcrumb-item>借贷审核</el-breadcrumb-item>
        <el-breadcrumb-item>新增标</el-breadcrumb-item>
        <el-breadcrumb-item>借款信息</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图 -->
      <el-card class="box-card">
        <!--表单-->
        <el-form :model="loaninfo" :rules="rules" ref="searchForm" class="demo-form-inline" >
          <el-row>
            <h1 style="color: red ;font-size: 50px" v-if="this.$route.query.type!='check'">新增借款</h1>
            <h1 style="color: red ;font-size: 50px" v-if="this.$route.query.type=='check'">借款信息</h1>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="标名" prop="bidName" label-width="100px">
                <el-input class="inputcss" v-model="loaninfo.bidName" placeholder="请输入名称" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="风险等级" prop="riskLev" label-width="100px">
                <el-select class="inputcss" v-model="loaninfo.riskLev" placeholder="请选择">
                  <el-option label="极低" :value="0"></el-option>
                  <el-option label="较低" :value="1"></el-option>
                  <el-option label="中等" :value="2"></el-option>
                  <el-option label="中高" :value="3"></el-option>
                  <el-option label="高" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="借款方" label-width="100px">
                <el-input style="width: 200px" v-model="name"  placeholder="请点击按钮选择借款账号" autocomplete="off"></el-input>
                <el-button @click="getBorrower()">选择用户</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="借款总金额" prop="totalAmount" label-width="100px">
                <el-input class="inputcss" v-model.number="loaninfo.totalAmount" placeholder="请输入500-5000000的整数" type="number" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年利率" prop="interest" label-width="100px">
                <el-input class="inputcss" v-model.number="loaninfo.interest" placeholder="请输入1-24之间的数，保留两位小数" autocomplete="off"></el-input>%
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="还款方式" prop="repayType" label-width="100px">
                <el-select v-model="loaninfo.repayType" placeholder="请选择">
                  <el-option label="一次性还款" :value="0"></el-option>
                  <el-option label="等额本金" :value="1"></el-option>
                  <el-option label="等额本息" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="期限类型" prop="termType" label-width="100px">
                <el-radio v-model="loaninfo.termType" @click="getDw()" :label="1">月</el-radio>
                <el-radio v-model="loaninfo.termType" @click="getDw()" :label="0">天</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="借款期限" prop="trem" label-width="100px">
                <el-input class="inputcss" v-model.number="loaninfo.trem" type="number" autocomplete="off"></el-input>{{this.dw}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="资金用途" prop="useFund" label-width="100px">
                <el-select v-model="loaninfo.useFund" placeholder="请选择">
                  <el-option label="短期周转" :value="短期周转"></el-option>
                  <el-option label="生意周转" :value="生意周转"></el-option>
                  <el-option label="购物消费" :value="购物消费"></el-option>
                  <el-option label="长期周转" :value="长期周转"></el-option>
                  <el-option label="其它用途" :value="其它用途"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="借款管理费月率" prop="manageRate" label-width="100px">
                <el-input class="inputcss" v-model.number="loaninfo.manageRate" placeholder="请输入1-24之间的数，保留两位小数" type="number" autocomplete="off"></el-input>%
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="逾期罚息利率" prop="fineRate" label-width="100px">
                <el-input class="inputcss" v-model.number="loaninfo.fineRate" placeholder="请输入1-24之间的数，保留两位小数" type="number" autocomplete="off"></el-input>%
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="借款类型" prop="loanType" label-width="100px">
                <el-select v-model="loaninfo.loanType" placeholder="请选择">
                  <el-option label="新增" :value="0"></el-option>
                  <el-option label="续贷" :value="1"></el-option>
                  <el-option label="资产处理" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="还款来源" prop="repaySouce" label-width="100px">
                <el-input class="inputcss" v-model="loaninfo.repaySouce" autocomplete="off">%</el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row><h1 style="color: red;font-size: 50px">担保信息</h1></el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否担保">
                  <el-radio v-model="loaninfo.isGrt" :label="0">否</el-radio>
                  <el-radio v-model="loaninfo.isGrt" :label="1">是</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="担保机构">
                <el-select v-model="mginfo.grtId" placeholder="请选择">
                  <el-option
                    v-for="item in grtlist"
                    :key="item.id"
                    :label="item.fullName"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="抵押类型">
                <el-radio v-model="mginfo.type" :label="0">无</el-radio>
                <el-radio v-model="mginfo.type" :label="1">房抵</el-radio>
                <el-radio v-model="mginfo.type" :label="2">车抵</el-radio>
                <el-radio v-model="mginfo.type" :label="3">民品抵</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="担保抵押材料">
                <div v-for="item in pathlist">
                  <img v-if="item.type==0" style="width: 200px;height: 150px" :src="'/api/finance-service-user/borrower/download/'+item.name">
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider><!--分割线-->
          <el-row><h1 style="color: red ;font-size: 50px">抵押材料</h1></el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="借款资料">
                <div v-for="item in pathlist">
                  <img v-if="item.type==1" style="width: 200px;height: 150px" :src="'/api/finance-service-user/borrower/download/'+item.name">
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
         <el-row>
           <el-col>
             <el-button @click="addOne(1)" type="primary" v-if="this.$route.query.type!='check'">保存</el-button>
             <el-button @click="back()" type="primary" v-if="this.$route.query.type=='check'">返回</el-button>
           </el-col>
         </el-row>
        </el-form>
      </el-card>
      <!--借款人列表-->
      <el-dialog title="选择借款人" :visible.sync="dialogTableVisible">
        <el-form :model="findForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="借款人" >
                <el-input v-model="findForm.fullName"  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-button size="mini" type="primary" @click="getBorrower()">查询</el-button>
            </el-col>
            </el-row>
        </el-form>
        <el-table :data="borList">
          <el-table-column
            type="id"
            width="50">
          </el-table-column>
          <el-table-column
            label="借款人姓名"
            prop="fullName">
          </el-table-column>
          <el-table-column
            label="类型"
            prop="type">
            <template slot-scope="scope">
              {{scope.row.type==0?'个人' : '企业'}}
            </template>
          </el-table-column>
          <el-table-column
            label="账号"
            prop="account">
          </el-table-column>
          <el-table-column
            label="信用分数"
            prop="creditScore">
          </el-table-column>
          <el-table-column
            label="状态"
            prop="state">
            <template slot-scope="scope">
              {{scope.row.status==1?'开启' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column
            label="注册时间"
            prop="regTime">
            <template slot-scope="scope">
              {{scope.row.regTime | datefmt('YYYY-MM-DD')}}
            </template>
          </el-table-column>
          <el-table-column
          label="更多操作">
            <template slot-scope="scope">
              <el-button size="mini" type="info" plain @click="getBorrowerDetail(scope.row)">选择用户</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--弹跳框分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="page.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "addLoan",
      data() {
        return {
          loaninfo:{},
          loanid:'',
          name:'',
          mginfo:{},
          grtlist:[],
          page:{
            pagenum:0,
            pagesize:5
          },
          res:{},
          pathlist:[],
          total:0,
          dw:'月',//期限天数
          dialogImageUrl: '',
          dialogVisible: false,//
          grtJG:null,//担保机构
          grtIds:"",//担保材料
          ckType:true,//默认成立计息
          borList:[],//借款人列表
          dialogTableVisible:false,//借款人列表
          delpath:'',
          searchForm:{
            loaninfo:{},
            mginfo:{},
            pathlist:[]
          },
          findForm:{},
          user:{
            username:null,
            userId:null,
          },
          rules: {
            bidName: [
              { required: true, message: '请输入', trigger: 'blur' }
            ],
            riskLev: [
              { required: true, message: '请选择', trigger: 'change' }
            ],
            interest: [
              {required: true, message: '请输入', trigger: 'blur' },
              {type: 'number', min: 0,max: 24 , required: true, message: '输入不合理', trigger: 'change' }
            ],
            totalAmount: [
              {required: true, message: '请输入', trigger: 'blur' },
              {type: 'number', min: 500,max: 5000000, required: true, message: '输入不合理', trigger: 'change' }
            ],
            termType: [
              { required: true, message: '请选择', trigger: 'change' }
            ],
            trem: [
              {required: true, message: '请输入', trigger: 'blur' },
              {type: 'number', min: 0,max: 999 , required: true, message: '输入不合理', trigger: 'change' }
            ],
            ckType:[
              { required: true, message: '请选择', trigger: 'change' }
            ],
            repayType: [
              { required: true, message: '请选择', trigger: 'change' }
            ],
            manageRate: [
              {required: true, message: '请输入', trigger: 'blur' },
              {type: 'number', min: 0,max: 24 , required: true, message: '输入不合理', trigger: 'change' }
            ],
            fineRate: [
              {required: true, message: '请输入', trigger: 'blur' },
              {type: 'number', min: 0,max: 24 , required: true, message: '输入不合理', trigger: 'change' }
            ],
            loanType: [
              { required: true, message: '请选择', trigger: 'change' }
            ],
            loanResIds: [
              { required: true, message: '请上传', trigger: 'change' }
            ]
          }
        }
      },
      filters: {
      },
      methods: {
        back:function(){
          this.$router.push("/addbiao?id="+this.$route.query.id);
        },
        search:function(loanid){
          this.$http.get("/finance-service-borrowing/loan/findform/"+loanid).then(
            (res)=>{
              if (res.data.success) {
                this.searchForm=res.data.result;
                this.loaninfo=this.searchForm.loaninfo;
                this.mginfo=this.searchForm.mginfo;
                this.pathlist=this.searchForm.pathlist;
              } else {
                this.$message.error(res.data.message);
              }
            }
          );
        },
        findgrt:function(){
          this.$http.get("/finance-service-borrowing/guarantee/findgrt").then(
            (res)=>{
              if (res.data.success) {
                this.grtlist=res.data.result;
              } else {
                this.$message.error(res.data.message);
              }
            }
          );
        },
        getBorrowerDetail:function(row){
          this.loaninfo.borrowerId = row.id;
          this.name=row.fullName;
          this.dialogTableVisible = false;
        },
        handleSizeChange:function (val) {
          this.page.pagesize=val;
          this.getBorrower();
        },
        handleCurrentChange:function (val) {
          this.page.pagenum=val;
          this.getBorrower();
        },
        getDw(){
          debugger
          //获取期限的单位
          let ck=this.searchForm.termType;
          if(ck==1){
            this.dw="月"
          }else{
            this.dw="天"
          }
        },
        getBorrower:function(){
          this.$http.post("/finance-service-user/borrower/getBorrower/"+this.page.pagenum+"/"+this.page.pagesize,this.findForm).then((res)=>{
            this.dialogTableVisible=true;
            this.borList = res.data.result.list;
            this.total = res.data.result.total;
            }
          )
        },
        getIt(id){//选择借款人
          this.searchForm.borrowerId=id;
          this.dialogTableVisible=false;
        },
        addOne(ck){
          this.loaninfo.status=ck;
          this.loaninfo.id=this.loanid;
          this.$refs['searchForm'].validate((valid) => {
             if (!valid) {
               return
             }else{
                this.$http.post("/finance-service-borrowing/loan/updateloan/"+this.user.id,this.loaninfo).then((res) => {
                  if (res.data.success) {
                  this.$message({
                    message: res.data.message,
                    type: "success"
                   })
                    this.$router.push("/mainntain");
                  } else {
                    this.$message.error(res.data.message);
                   }
                });
             }
          });
        },
      },
      mounted() {
        this.loanid=this.$route.query.id;
        this.user=JSON.parse(sessionStorage.getItem("user")); //=JSON.parse()字符串转json对象 ，JSON。stringify（）对象转字符串
        this.findgrt();
        this.search(this.loanid);
      },
    }
</script>

<style scoped>
  .inputcss{
    width:351px;
    height: 36px;
  }
</style>
